<template>
  <div>
    <el-form
      :model="addUserForm"
      :label-position="labelPosition"
      ref="addUserFormRef"
      label-width="80px"
    >
      <el-row>
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="addUserForm.username"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="部门" prop="departmentId">
              <el-select
                v-model="addUserForm.departmentId"
                clearable=""
                placeholder="请选择所属部门"
              >
                <el-option
                  v-for="item in departments"
                  :key="item.name + ''"
                  :label="item.name"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">
                    <span
                      class="el-tag el-tag--success el-tag--mini el-tag--plain"
                    >
                      {{ item.total }}
                    </span>
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="addUserForm.nickname"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="addUserForm.sex">
                <el-radio :label="1">帅哥</el-radio>
                <el-radio :label="0">美女</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addUserForm.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addUserForm.email"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="phoneNumber">
        <el-input v-model="addUserForm.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item prop="birth" label="生日">
        <el-col :span="11">
          <el-date-picker
            value-format="yyyy年MM月dd日"
            type="date"
            placeholder="选择出生日期"
            v-model="addUserForm.birth"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
    </el-form>
    <div class="button-box">
      <el-button type="primary" @click="add">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { findAllDepartmentNames } from "../../api/system/department";
import { addUser } from "../../api/system/user";
export default {
  name: "UserAdd",
  data() {
    return {
      // label 对齐方式
      labelPosition: "right",
      addUserForm: {
        birth: "",
        createTime: "",
        departmentId: null,
        departmentName: "",
        email: "",
        id: 0,
        nickname: "",
        password: "",
        phoneNumber: "",
        sex: -1,
        status: true,
        username: "",
      },
      departments: [],
    };
  },
  methods: {
    async add() {
      addUser(this.addUserForm).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message.success("添加用户成功");
          this.$emit("closeAddDialog", false);
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    closeDialog() {
      this.$emit("closeAddDialog", false);
      this.addUserForm = {};
    },
  },
  created() {
    findAllDepartmentNames().then((res) => {
      if (res.success) {
        console.log(res.data);
        this.departments = res.data;
      } else {
        this.$message.error("查找部门名列表出错");
      }
    });
    console.log(this.departments);
  },
};
</script>

<style>
.button-box {
  margin-left: 250px;
}
</style>